<template>
    <div>
        <el-row type="flex" class="main" justify="center">
            <el-col :xl="6" :lg="7">
                <div class="login-form">
                    <h2>turbo-umbrella</h2>
                    <el-image
                            src="https://img2.baidu.com/it/u=2361676761,992841863&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800"
                    ></el-image>
                </div>
            </el-col>
            <el-col :span="1">
                <el-divider direction="vertical"></el-divider>
            </el-col>
            <el-col :xl="6" :lg="7">
                <el-form label-position="right" :rules="rules" label-width="80px" :model="loginForm" ref="loginForm">
                    <el-form-item label="用户名" prop="username" style="width: 380px;">
                        <el-input v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password" style="width: 380px;">
                        <el-input type="password" v-model="loginForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="code" style="width: 380px;">
                        <el-input v-model="loginForm.code" style="width: 172px; float: left;" maxlength="5"></el-input>
                        <el-image class="captchaImg" :src="captchaImg" @click="getCaptcha()">
                            <template #error>
                                <div class="image-slot">
                                    <p>加载失败</p>
                                </div>
                            </template>
                        </el-image>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
<!--                        <el-button @click="getPass()">获取密码</el-button>-->
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
// TODO 换角色登录菜单未刷新

export default {
    name: "Login",
    data() {
        return {
            loginForm: {
                username: 'user',
                password: '123456',
                code: '',
                token: '',
            },
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ],
                code: [
                    {required: true, message: '请输入验证码', trigger: 'blur'},
                    {min: 4, max: 4, message: '验证码为4字符', trigger: 'blur'}
                ],
            },
            captchaImg: ''
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http.post('/user/login', this.loginForm, {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }
                    ).then(resp => {
                        console.log(resp)
                        // 将jwt存储到应用store中
                        const token = resp.data.data.token;
                        const user = resp.data.data.user;
                        console.log(user)
                        this.$store.commit("setToken", token);
                        this.$auth.setUserAndToken(user, token);
                        this.$router.push("/index")
                    }).catch(err => {
                        console.log(err)
                        this.getCaptcha();
                    })
                } else {
                    this.getCaptcha();
                    console.log('error submit');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        getPass() {

        },
        getCaptcha() {
            this.$http.get('/captcha').then(resp => {
                this.loginForm.token = resp.data.data.token;
                this.captchaImg = resp.data.data.captchaImg;
            })
        }
    },
    created() {
        this.getCaptcha()
    }
}
</script>

<style scoped>
.title {
    text-align: center;
}

.main {
    height: 700px;
}

.el-col {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}

.el-divider {
    height: 200px;
}

.captchaImg {
    float: left;
    margin-left: 8px;
    border-radius: 4px;
    width: 100px;
}
</style>
